<template>
    <div id="help" @click.stop>
        <div class="btn-bar">
            <el-button type="primary" @click="viewHelpDoc('web')">web端操作手册</el-button>
        </div>
        <div class="btn-bar">
            <el-button type="primary" @click="viewHelpDoc('app')">app端操作手册</el-button>
        </div>  
        <el-dialog class="doc-viewer" title="查看手册" :visible.sync="showDocViewer" width="100%" append-to-body>
            <!-- <pdfViewer src="public/doc/helpdoc-web.pdf"></pdfViewer> -->
            <iframe class="ifm" ref="ifm" src="" frameborder="0"></iframe>
        </el-dialog>
    </div>
</template>
<script>
import { setTimeout } from 'timers';
export default {
    data(){
        return{
            showDocViewer:false,
        }
    },
    methods:{
        viewHelpDoc(value){
            this.showDocViewer=true
            this.$nextTick(()=>{
                if(value==="web"){
                   // var src=require("/public/doc/helpdoc-web.pdf")
					//var src=import "public/doc/helpdoc-web.pdf";
                    this.$refs.ifm.src=""
                }else if(value==="app"){
                    //var src=require("/public/doc/helpdoc-app.pdf")
                    this.$refs.ifm.src=""
                }
            })

            this.showDocHelp=false
        },

    }
}
</script>
<style lang="scss" scoped>
#help{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    .btn-bar{
        text-align: center;
        padding:25px;
    }
}

.doc-viewer{
  width: 100%;
  height: 100vh;
  /deep/ .el-dialog{
    width: 100%;
    height: 100%;
    margin:0px !important;
    max-height:none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .el-dialog__body{
      flex: 1;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  
  .ifm{
    width:100%;
    height: 100%;
  }
}

</style>


